﻿@page "/tests/buttons"
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Default Buttons</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use the color enums like <code>Color.Primary</code></CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary">PRIMARY</Button>
                <Button Color="Color.Secondary">SECONDARY</Button>
                <Button Color="Color.Success">SUCCESS</Button>
                <Button Color="Color.Danger">DANGER</Button>
                <Button Color="Color.Warning">WARNING</Button>
                <Button Color="Color.Info">INFO</Button>
                <Button Color="Color.Light">LIGHT</Button>
                <Button Color="Color.Dark">DARK</Button>
                <Button Color="Color.Link">LINK</Button>
                <Button>NONE</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Outline Buttons</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>Outline</code> ones to remove all background images and colors on any button.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Outline="true">PRIMARY</Button>
                <Button Color="Color.Secondary" Outline="true">SECONDARY</Button>
                <Button Color="Color.Success" Outline="true">SUCCESS</Button>
                <Button Color="Color.Danger" Outline="true">DANGER</Button>
                <Button Color="Color.Warning" Outline="true">WARNING</Button>
                <Button Color="Color.Info" Outline="true">INFO</Button>
                <Button Color="Color.Light" Outline="true">LIGHT</Button>
                <Button Color="Color.Dark" Outline="true">DARK</Button>
                <Button Color="Color.Link" Outline="true">LINK</Button>
                <Button Outline="true">NONE</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add Button Size <code>.ExtraSmall, .Small, .Medium, .Large, .ExtraLarge</code> for additional sizes.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Size="Size.ExtraSmall">EXTRASMALL</Button>
                <Button Color="Color.Secondary" Size="Size.Small">SMALL</Button>
                <Button Color="Color.Info" Size="Size.None">NORMAL</Button>
                <Button Color="Color.Success" Size="Size.Medium">MEDIUM</Button>
                <Button Color="Color.Warning" Size="Size.Large">LARGE</Button>
                <Button Color="Color.Danger" Size="Size.ExtraLarge">EXTRALARGE</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Block</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Create block level buttons by adding <code>Block="true"</code></CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Block="true">BLOCK PRIMARY</Button>
                <Button Color="Color.Secondary" Block="true">BLOCK SECONDARY</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Active</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add the <code>Active</code> attribute to buttons.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Active="true">PRIMARY</Button>
                <Button Color="Color.Link" Active="true">LINK</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Disabled</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add the <code>Disabled</code> attribute to buttons.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Disabled="true">PRIMARY</Button>
                <Button Color="Color.Secondary" Disabled="true">SECONDARY</Button>
                <Button Color="Color.Success" Disabled="true">SUCCESS</Button>
                <Button Color="Color.Danger" Disabled="true">DANGER</Button>
                <Button Color="Color.Warning" Disabled="true">WARNING</Button>
                <Button Color="Color.Info" Disabled="true">INFO</Button>
                <Button Color="Color.Light" Disabled="true">LIGHT</Button>
                <Button Color="Color.Dark" Disabled="true">DARK</Button>
                <Button Color="Color.Link" Disabled="true">LINK</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Loading</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Loading</code> attribute to add spinners within buttons to indicate an action is currently processing or taking place. Use <code>@("<LoadingTemplate>")</code> to add a custom loading template</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Loading="true">PRIMARY</Button>
                <Button Color="Color.Secondary" Loading="true">SECONDARY</Button>
                <Button Color="Color.Success" Loading="true">SUCCESS</Button>
                <Button Color="Color.Danger" Loading="true">DANGER</Button>
                <Button Color="Color.Warning" Loading="true">WARNING</Button>
                <Button Color="Color.Info" Loading="true">INFO</Button>
                <Button Color="Color.Light" Loading="true">LIGHT</Button>
                <Button Color="Color.Dark" Loading="true">DARK</Button>
                <Button Color="Color.Link" Loading="true">LINK</Button>
                <Button Color="Color.Primary" Clicked="ShowLoading" Loading="@isLoading">
                    <LoadingTemplate>
                        This is a custom loading template
                    </LoadingTemplate>
                    <ChildContent>
                        Click to load
                    </ChildContent>
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Button Addons</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Wrap a series of buttons with <code>Buttons</code> component.</CardText>
            </CardBody>
            <CardBody>
                <Buttons>
                    <Button Color="Color.Secondary">LEFT</Button>
                    <Button Color="Color.Secondary">CENTER</Button>
                    <Button Color="Color.Secondary">RIGHT</Button>
                </Buttons>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Nesting</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>You can also combine them with dropdown..</CardText>
            </CardBody>
            <CardBody>
                <Buttons>
                    <Button Color="Color.Secondary">LEFT</Button>
                    <Button Color="Color.Secondary">CENTER</Button>
                    <Dropdown>
                        <DropdownToggle Color="Color.Secondary">Dropdown</DropdownToggle>
                        <DropdownMenu>
                            <DropdownItem>Item 1</DropdownItem>
                            <DropdownItem>Item 2</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </Buttons>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Buttons toolbar</CardTitle>
            </CardHeader>
            <CardBody>
                <Buttons Role="ButtonsRole.Toolbar">
                    <Buttons Margin="Margin.Is2.FromRight">
                        <Button Color="Color.Primary">Primary</Button>
                        <Button Color="Color.Secondary">Secondary</Button>
                        <Button Color="Color.Info">Info</Button>
                    </Buttons>
                    <Buttons>
                        <Button Color="Color.Danger">Danger</Button>
                        <Button Color="Color.Warning">Warning</Button>
                    </Buttons>
                    <Buttons Margin="Margin.Is2.OnX">
                        <Button Color="Color.Light">Light</Button>
                    </Buttons>
                </Buttons>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dropdown Nesting</CardTitle>
            </CardHeader>
            <CardBody>
                <Dropdown>
                    <DropdownToggle Color="Color.Primary">Level 1</DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem>Item 1.1</DropdownItem>
                        <Dropdown>
                            <DropdownToggle>Level 2</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem>Item 2.1</DropdownItem>
                                <DropdownItem>Item 2.2</DropdownItem>
                                <Dropdown>
                                    <DropdownToggle>Level 3</DropdownToggle>
                                    <DropdownMenu>
                                        <DropdownItem>Item 3.1</DropdownItem>
                                        <DropdownItem>Item 3.2</DropdownItem>
                                        <Dropdown>
                                            <DropdownToggle>Level 4</DropdownToggle>
                                            <DropdownMenu>
                                                <DropdownItem>Item 4.1</DropdownItem>
                                                <DropdownItem>Item 4.2</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                    </DropdownMenu>
                                </Dropdown>
                            </DropdownMenu>
                        </Dropdown>
                    </DropdownMenu>
                </Dropdown>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dropdown</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Turn a button into a dropdown.</CardText>
            </CardBody>
            <CardBody>
                <Dropdown>
                    <DropdownToggle Color="Color.Primary">
                        DROPDOWN
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Action</DropdownItem>
                        <DropdownItem Active="true">Active item</DropdownItem>
                        <DropdownItem Disabled="true">Disabled item</DropdownItem>
                        <DropdownDivider />
                        <DropdownItem>Another Action</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown>
                    <Button Color="Color.Secondary">SPLIT DROPDOWN</Button>
                    <DropdownToggle Color="Color.Secondary" Split="true"></DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Action</DropdownItem>
                        <DropdownDivider />
                        <DropdownItem>Another Action</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown>
                    <DropdownToggle Color="Color.Danger" ToggleIconVisible="false">
                        HIDDEN TOGGLE
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Action</DropdownItem>
                        <DropdownDivider />
                        <DropdownItem>Another Action</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dropdown direction</CardTitle>
            </CardHeader>
            <CardBody>
                <Dropdown Display="Display.InlineBlock">
                    <DropdownToggle Color="Color.Secondary">Down</DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Item 1</DropdownItem>
                        <DropdownItem>Item 2</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown Direction="Direction.Up" Display="Display.InlineBlock">
                    <DropdownToggle Color="Color.Secondary">Up</DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Item 1</DropdownItem>
                        <DropdownItem>Item 2</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown Direction="Direction.Left" Display="Display.InlineBlock">
                    <DropdownToggle Color="Color.Secondary">Left</DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Item 1</DropdownItem>
                        <DropdownItem>Item 2</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown Direction="Direction.Right" Display="Display.InlineBlock">
                    <DropdownToggle Color="Color.Secondary">Right</DropdownToggle>
                    <DropdownMenu>
                        <DropdownHeader>Dropdown header</DropdownHeader>
                        <DropdownItem>Item 1</DropdownItem>
                        <DropdownItem>Item 2</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </CardBody>
        </Card>
    </Column>
</Row>
@code {
    private bool isLoading;

    private async Task ShowLoading()
    {
        isLoading = true;

        await Task.Delay( TimeSpan.FromSeconds( 3 ) );

        isLoading = false;
    }
}